<template>
  <div>
    <p>直播管理</p>

    <span>直播状态</span>
    <el-select v-model="value" class="m-2" placeholder="Select" size="large">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
        @click="liveselect(item)" />
    </el-select>
    <span>经纪人搜索</span>
    <el-input class="inp" clearable v-model="username" placeholder="姓名id"></el-input>
    <el-button type="primary" @click="cha">
        搜索
      <el-icon>
     
      </el-icon></el-button>
    <el-tabs type="border-card" >
      <el-tab-pane label="全部直播">
        <dl class="box" v-for="(item,index) in tableData" :key="index" >
          <dt>
            <img :src="item.img" alt="">
          </dt>
          <dd>
            <span>{{ item.title }}</span>
          
          </dd>
          <dd>
              <span >{{ item.name }}</span>
              <span >{{ item.time }}</span>
            
              <span>{{ item.date }}</span>
              <!-- <p>进入直播</span> -->
              <a href="">进入直播</a>
              <el-switch v-model="item.status" inline-prompt :active-text="开启" inactive-text="关闭" @click="upstatus(item)"></el-switch>
            <el-button type="primary" @click="deldata(item)">删除</el-button>
          </dd>   
        </dl>

      </el-tab-pane>
      <el-tab-pane label="直播中"  >

      </el-tab-pane>
      <el-tab-pane label="已结束"></el-tab-pane>

    </el-tabs>

  </div>
</template>

<script setup >
import { ref, onMounted} from "vue"

import {LiveDate,UPLIVE,DELECTLIVE} from '../../api/daili'
onMounted(()=>{
  getlive()
})
const getlive=()=>{
    LiveDate().then((res)=>{
      tableData.value=res.data.data
      console.log(res,"1111");
    })
}
const upstatus=(item)=>{

  let data ={
    "id":item.id,
    "status":item.status
  }
  console.log(data,"ghjkl");
  // UPLIVE(data).then(res=>{
  //       console.log(res,"lkjb");
  // })
}

const deldata= (item)=>{
  let params ={
    id:item.id
  }
  console.log(params);
  DELECTLIVE(params).then((res)=>{
    console.log(res);
  })
}

const tableData=ref()

const value1 = ref(true)
const username = ref('')

const value = ref('请选择')

const options = [
  {
    value: "直播中",
    label: "直播中",
  },
  {
    value: "已结束",
    label: '已结束'
  }
]
const selectList = ref(tableData)

const liveselect = (item) => {
  

   let arr = []

   
   tableData.value.forEach((value, index) => {
      if (value.date === item.label) {
         arr.push(value)
      }
      selectList.value = arr
   })
}
const cha = ()=>{ 
  tableData.value =tableData.value.filter((v)=>v.name.includes(username.value)) 
}

</script>
<style scoped>
.inp {
  width: 200px;
}
.time {
  font-size: 12px;
  color: #999;
}
.box{
  width: 200px;
border: 1px solid #ccc;
float: left;
}
img{
  width: 100%;
  height: 100px;
}
.twobox{
  width: 600px;
float: left;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
dt{
  line-height: 10px;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  display: block;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
}
</style>


